
<template>
  <div>
      <div class="topwrap">
        <div id="header">
            <Header @show='openAside'></Header>
            <asideBar :show='show' ref='aside'></asideBar>
        </div>
        <div class="lunbo">
 <mt-swipe :auto="4000" >
     <mt-swipe-item><img src="../assets/lunbo/lunbo1.png" alt=""></mt-swipe-item>
  <mt-swipe-item><img src="../assets/lunbo/lunbo2.png" alt=""></mt-swipe-item>
  <mt-swipe-item><img src="../assets/lunbo/lunbo3.png" alt=""></mt-swipe-item>
    <mt-swipe-item><img src="../assets/lunbo/lunbo4.png" alt=""></mt-swipe-item>
</mt-swipe>
        </div>
       
      <div class="tabbar">
          <ul >
              <li @click="oncheck(1)" ref="tab1" class="tabfont" :class="{'active': isActive}">最新</li>
              <li @click="oncheck(2)" ref="tab2"  class="tabfont">官方</li>
              <li @click="oncheck(3)" ref="tab3"  class="tabfont">公告</li>
          </ul>
      </div>

      <div class="tabbar_contain" v-if="status===1">
          <ul  v-for="(each,i) in news" :key="i" >
              <li>
              <img :src="each.imgurl_s" alt=""><span> {{each.title}}</span>
              <p>{{each.time}}</p>
              </li>
          </ul>
           
      </div>
      <div class="tabbar_contain" v-else-if='status===2'>
         <ul  v-for="(each,i) in news" :key="i+6">
              <li>
              <img :src="each.imgurl_s" alt=""><span> {{each.title}}</span>
              <p>{{each.time}}</p>
              </li>
          </ul>
      </div>
      <div class="tabbar_contain" v-else-if='status===3'>
         <ul  v-for="(each,i) in ad" :key="i">
              <li>
              <img :src="each.imgurl_s" alt=""><span> {{each.title}}</span>
              <p>{{each.time}}</p>
              </li>
          </ul>
      </div>
      <!-- <mt-loadmore  :bottom-method="loadBottom" ref="loadmore">
<ul  v-for="(each,i) in news" :key="i">
              <li>
              <img :src="each.imgurl_s" alt=""><span> {{each.title}}</span>
              <p>{{each.time}}</p>
              </li>
          </ul>
</mt-loadmore> -->
            </div>
  </div>
</template>

<script>
import Header from '../components/Header.vue'
import asideBar from '../components/asideBar.vue'
export default {
    mounted(){
        // console.log(this.ad);
        // console.log(this.news)
    },
    components:{
        Header,
        asideBar
    },
    data(){
        return{
            isActive:true,
            status:1,
            show:false,
            ad:[
                {
                    imgurl_s:require('../assets/csgo_head.png'),
                    title:'【VAC无法验证您的游戏会话】处理方案',
                     time:'2020-4-16'
                },
                 {
                    imgurl_s:require('../assets/csgo_head.png'),
                    title:'【VAC无法验证您的游戏会话】处理方案',
                     time:'2020-4-16'
                },
                {
                    imgurl_s:require('../assets/csgo_head.png'),
                    title:'【VAC无法验证您的游戏会话】处理方案',
                     time:'2020-4-16'
                },
                 {
                    imgurl_s:require('../assets/csgo_head.png'),
                    title:'【VAC无法验证您的游戏会话】处理方案',
                     time:'2020-4-16'
                },
                 {
                    imgurl_s:require('../assets/csgo_head.png'),
                    title:'【VAC无法验证您的游戏会话】处理方案',
                     time:'2020-4-16'
                },
                  {
                    imgurl_s:require('../assets/csgo_head.png'),
                    title:'【VAC无法验证您的游戏会话】处理方案',
                     time:'2020-4-16'
                },
            ],
            news:[
                {
                    imgurl_s:require('../assets/news/01.png'),
                    title:'[新闻]CSGO周边创意设计大赛开启,奖金池提升留言拿皮肤！',
                    time:'2020-4-18'
                },
                {
                    imgurl_s:require('../assets/news/02.png'),
                    title:'你的大学电竞社认证了吗？ 完美高校电竞社招募平台正式上线！',
                    time:'2020-4-17'
                },
                {
                    imgurl_s:require('../assets/news/03.jpg'),
                    title:'本周六CS:GO守擂赛第一周！谁将坐镇首位擂主宝座？',
                    time:'2020-4-17'
                },{
                    imgurl_s:require('../assets/news/04.jpg'),
                    title:'2020HSL虎牙超级联赛CS:GO专场精英集结！明星阵容带你Rush B！',
                    time:'2020-4-16'
                },
                {
                    imgurl_s:require('../assets/news/05.jpg'),
                    title:'寻找下一个解说新星！2020春季校园解说孵化活动报名开启',
                    time:'2020-4-10'
                },
                {
                    imgurl_s:require('../assets/news/03.png'),
                    title:'H5小故事教你WDNMD的正确用法',
                    time:'2020-4-10'
                }
            ],
            // active:'tab-container1',
            imgurl:[require('../assets/lunbo/lunbo1.png'),require('../assets/lunbo/lunbo2.png'),require('../assets/lunbo/lunbo3.png'),require('../assets/lunbo/lunbo4.png')]
        }
    },
    methods:{
        openAside(state){
            this.show=state
            this.$refs.aside.changeShow()
        },
        addClass(e){
            console.log(e)
        },
        oncheck(num){
            this.isActive=false;
            this.status=num;
            for(var key in this.$refs){
               if(key=='tab'+num)this.$refs[key].style='background-color: rgb(196, 84, 99);font-weight:bold; font-size:1.1em'
               else{this.$refs[key].style='background-color:none'}
            }
        }
    },
    computed:{
        toHide(){
            return 'toHide'
        }
    }
}
</script> 

<style lang="scss" scoped>
li{
    list-style-type: none;
}
#header{
    height: 50px;
}
.lunbo{
    height:11rem;
    // background-color:red;
    position:relative;
    ul{
        width: 100%;
        padding: 0;
        height:100%;
    }
    li{
        height:100%;
        width:100%;
        position: absolute;
    }
    img{
        width: 100%;
        height:100%
    }
    
}
.tabbar{
    display: flex;
    ul{
        width:100%;
        padding-left: 0;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: rgb(119, 102, 82);
        li{
            width: 33.3%;
            text-align: center;
            padding: 10px;
        }
    }

}
.tabbar_contain{
    height: 100%;
    ul{
        display: flex;
        height:100%;
        padding-left: 0;
        margin: 0;
        position: relative;
        padding-top:10px;
        padding-bottom: 20px;
        border-bottom: 1px solid #000;
        li{
            height: 100%;
            // padding: 10px;
            img{
                height: 5rem;
                width: 5rem;
                float: left;
                padding-right: 15px;;
                vertical-align: middle;
            }
            span{
                padding-left: 5px;
                vertical-align:bottom;
                font-size:.9em;
            }
            p{
                display: inline;
                position: absolute;
                right: 0;
                bottom: 10px;
                margin:0;
                font-size: .7em;
            }
        }
    }
    
}
.tabfont{
    color:#fff;
    font-size: 1em;
    font-weight: 200;
}
// .oncheck{
//     background-color: rgb(196, 84, 99);
// }
.active{
    background-color: rgb(196, 84, 99);font-weight:bold; font-size:1.1em
}
.toHide{
    opacity: 1;
}
</style>